<template>
  <button @click="state.isshow = !state.isshow,openCamera()">dakai</button>
  <button id="stopVideo" @click="stopVideo">关闭摄像头</button>
  <button id="stopVideo" @click="checkImg">选择图片</button>
  <button @click="setImage">sss</button>
  <video id='video'></video>
  <view class="content" v-show="state.isshow">
    <div id="container">
      <video id="video-local" autoplay playsinline></video>
      <!-- <button id="showVideo">打开摄像头</button>
      <button id="stopVideo">关闭摄像头</button> -->
      <!-- <button @click="setImage">sss</button> -->
      <p>显示摄像头预览的内容，网页上由元素video来呈现。</p>
      <p>点击打开摄像头按钮后，浏览器会询问是否允许，请点击“允许”。</p>
      <div id="errorMsg"></div>
      <div id="tipMsg"></div>
      <canvas id="canvas"></canvas>
    </div>
  </view>
</template>

<script setup>
import { reactive, getCurrentInstance, onMounted, ref } from "vue";
import { setAuthorization, getAuthorization } from "@/utils/auth.js";
import { onLoad } from "@dcloudio/uni-app";
import * as tracking from '@/tracking/tracking-min.js';
import '@/tracking/data/face-min.js';
var  videoHeight;
   var videoWidth;
    var video = document.querySelector('video');
    var audio, audioType;
    var canvas1 = document.getElementById('canvas1');
    var context1 = canvas1.getContext('2d');
    var canvas2 = document.getElementById('canvas2');
    var context2 = canvas2.getContext('2d');
 
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
    var exArray = []; //存储设备源ID
    try {
        MediaStreamTrack.getSources(function (sourceInfos) {
            for (var i = 0; i != sourceInfos.length; ++i) {
                var sourceInfo = sourceInfos[i];
                    //这里会遍历audio,video，所以要加以区分
                if (sourceInfo.kind === 'video') {
                    exArray.push(sourceInfo.id);
                }
            }
        });
    } catch (e) {
        console.log(e)
    }
 
    function getMedia() {
        if (navigator.getUserMedia) {
            navigator.getUserMedia({
                'video': {
                    'optional': [{
                        'sourceId': exArray[0] //0为前置摄像头，1为后置
                    }]
                },
                'audio': true
            }, successFunc, errorFunc); //success是获取成功的回调函数
        } else {
            /**
             * 测试ios手机及笔记本，微信及浏览器， 有趣的是navigator有getUserMedia这个属性，但值为均为undefined
             *时间  20191120
             *
             * */
            alert('Native device media streaming (getUserMedia) not supported in this browser.');
        }
    }
 
    function successFunc(stream) {
//alert('Succeed to get media!');
        console.log(stream);
        if (video.mozSrcObject !== undefined) {
//Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持
            video.mozSrcObject = stream;
        } else {
            try {
                video.src = window.URL && window.URL.createObjectURL(stream) || stream;
            } catch (e) {
                /**
                 * 之前工作的网页调用摄像头获取视频并拍照的作品报错：
                 Failed to execute 'createObjectURL' on 'URL'
                 原因是Chrome升级后，新版本的Chrome不再支持该用法。
                 其他主流浏览器也是如此，详细讨论请参考如下链接：
                 https://www.fxsitecompat.com/en-CA/docs/2017/url-createobjecturl-stream-has-been-deprecated/
                 * */
                try {
                    video.srcObject = stream;
                } catch (error) {
                    console.log(error)
                }
            }
 
 
        }
//video.play();
// 音频
        audio = new Audio();
        audioType = getAudioType(audio);
        if (audioType) {
            audio.src = 'polaroid.' + audioType;
            audio.play();
        }
        video.onplay=function (ev) {
            videoHeight=video.videoHeight;
            videoWidth=video.videoWidth;
            console.log(videoHeight)
            console.log(videoWidth)
            canvas1.width=videoWidth;
            canvas1.height=videoHeight;
            canvas2.width=videoWidth;
            canvas2.height=videoHeight;
        }
 
    }
 
    function errorFunc(e) {
        alert('Error！' + e);
    }
 
    var img = new Image();
    img.src = "./imgs/shabi.png";
    img.onload = function (ev) {
        context1.drawImage(img, 0, 0);
        context2.drawImage(img, 0, 0);
    }
 
    // 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果
    function drawVideoAtCanvas(video, context) {
        window.setInterval(function () {
            context.drawImage(video, 0, 0);
            context.drawImage(img, 0, 0);
 
        }, 60);
    }
 
    //获取音频格式
    function getAudioType(element) {
        if (element.canPlayType) {
            if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {
                return ('aac');
            } else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
                return ("ogg");
            }
        }
        return false;
    }
 
    // vedio播放时触发，绘制vedio帧图像到canvas
    // video.addEventListener('play', function () {
    // drawVideoAtCanvas(video, context2);
    // }, false);
    //拍照
    function getPhoto() {
        context1.drawImage(video, 0, 0); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
        context1.drawImage(img, 0, 0);
    }
 
    //视频
    function getVedio() {
        drawVideoAtCanvas(video, context2);
    }
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(130px);

  .login-image {
    margin-top: -200rpx;
    display: flex;
    justify-content: center;
  }

  .login-image-text {
    margin-top: 15rpx;
    text-align: center;
    font-weight: 700;
    font-size: 32rpx;
    line-height: 150%;
    color: #223263;
  }
}

.login-form {
  margin-top: 20px;
}

.unilogin-form-item {
  display: flex;
  width: calc(100vw - 40rpx);
  border: 2rpx solid #f2f2f2;
  background: #fff;
  align-items: center;
  padding: 10rpx 20rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  border-radius: 10rpx;

  .login-item-input {
    width: 100%;
    margin-left: 10rpx;
    height: 72rpx;
    line-height: 72rpx;
    padding: 0;
    font-size: 60rpx;
  }
}

::v-deep .van-field__control {
  font-size: 32rpx;
  height: 72rpx;
  line-height: 72rpx;
}

.column1 {
  border: 2rpx solid #2596d7 !important;
  color: #2596d7;
}

.van-button {
  height: 120rpx;
  background: radial-gradient(125% 125% at 85.42% 0%, #85d3ff 0%, #2596d7 100%);
  border-radius: 8px;
  font-style: normal;
  font-weight: 600;
  font-size: 36rpx;
  color: #fff;
  border: none;
}

input {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-focus: none;
  -moz-user-select: none;
  -webkit-appearance: none;
  outline: none;
  border: none;
}
:deep(.uni-video-cover) {
  display: none !important;
}
:deep(.uni-video-bar) {
  display: none !important;
}
#video-local {
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  transform: scaleX(-1);
}
</style>
